<template>
  <view class="product-select-container">
    <view class="search-bar">
      <input v-model="search" :placeholder="$t('order_proudct.search_placeholder')" class="search-input" @confirm="onSearch" />
    </view>
    <scroll-view scroll-y class="product-list-scroll" @scrolltolower="loadMore">
      <view class="product-grid">
        <view v-for="item in filteredList" :key="item.id" class="product-card" @click="selectProduct(item)">
          <image :src="item.show_img" class="product-img" />
          <view class="product-title">{{ item.name }}</view>
          <view class="product-meta">
            <text class="product-price">￥{{ item.price }}</text>
            <text class="product-duration">{{ item.duration }}{{ $t('order_proudct.minute') }}</text>
          </view>
          <view class="product-title">{{ getProductTypeName(item.type) }}</view>
        </view>
      </view>
      <view v-if="loading" class="loading">{{ $t('common.loading') }}</view>
      <view v-if="!hasMore && !loading" class="no-more">{{ $t('order_proudct.no_more') }}</view>
    </scroll-view>
  </view>
</template>

<script>
import { getProducts } from '@/api/order.js';
export default {
  data() {
    return {
      search: '',
      page: 1,
      pageSize: 6,
      loading: false,
      hasMore: true,
      productList: []
    }
  },
  computed: {
    filteredList() {
      // 接口数据已做筛选，直接返回 productList
      return this.productList;
    }
  },
  onLoad(options) {
    if (options.type) {
      this.type = options.type;
    }
    this.initList();
  },
  methods: {
    async initList() {
      this.page = 1;
      this.hasMore = true;
      this.productList = [];
      await this.loadMore();
    },
    async loadMore() {
      if (!this.hasMore || this.loading) return;
      this.loading = true;
      try {
        const res = await getProducts({
          page: this.page,
          pageSize: this.pageSize,
          name: this.search,
          type: this.type
        });
        const list = res.result.items || [];
        if (this.page === 1) {
          this.productList = list;
        } else {
          this.productList = this.productList.concat(list);
        }
        if (list.length < this.pageSize) {
          this.hasMore = false;
        } else {
          this.page++;
        }
      } catch (e) {
        this.hasMore = false;
      }
      this.loading = false;
    },
    selectProduct(item) {
      // 选中产品时写入 localStorage
      uni.setStorageSync('helper_selected_product', item);
      // 回传事件
      uni.$emit('productSelected', item);
      // 判断页面栈
      const pages = getCurrentPages();
      if (pages.length <= 1) {
        // 刷新进入的，直接跳转回 index
        uni.reLaunch({
          url: '/pages/order/index'
        });
      } else {
        // 正常返回
        uni.navigateBack();
      }
    },
    async onSearch() {
      this.page = 1;
      this.hasMore = true;
      this.productList = [];
      await this.loadMore();
    },
    
    // 获取产品类型名称
    getProductTypeName(type) {
      switch (type) {
        case 0:
          return '按摩产品';
        case 1:
          return '针灸产品';
        default:
          return '未知类型';
      }
    }
  }
}
</script>

<style scoped>
.product-select-container {
  padding: 0 0 20px 0;
  background: #f7f7f7;
  min-height: 100vh;
}
.search-bar {
  padding: 16px 16px 8px 16px;
  background: #fff;
}
.search-input {
  width: 100%;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  padding: 0 16px;
  font-size: 16px;
  background: #f9f9f9;
  outline: none;
}
.product-list-scroll {
  height: calc(100vh - 60px);
  padding-top: 12px;
}
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 12px;
}
.product-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px 8px 8px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.product-card:active {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.product-img {
  width: 100px;
  height: 66px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
}
.product-title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  text-align: center;
  margin-bottom: 4px;
}
.product-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  color: #888;
}
.product-price {
  color: #e54d42;
  font-weight: bold;
}
.product-duration {
  color: #007aff;
}
.loading,
.no-more {
  text-align: center;
  color: #888;
  padding: 12px 0;
  font-size: 14px;
}
</style> 